<template>
  <div class="jjxbox" :style="{backgroundImage:'url('+$ossLink+'/app/gif/'+$store.state.siteWebConfig.login_bgimg+')'}"  >
      <div class="jjxbox_top">
        </div>
      <div class="jjxbox_center">
          <div class="jjxbox_center_left">          
          </div>
          <div class="jjxbox_center_right">
              <div class="login_box" v-loading="loading" :style="{backgroundImage:'url('+$ossLink+'/app/gif/'+$store.state.siteWebConfig.login_mask+')'}">
                  <div class="right_icon">
                      <img  :src="$ossLink + '/app/gif/'+$store.state.siteWebConfig.login_img" :alt="$t('clientPortalLogin.mspbots')" style="width: 100%;height: 100%;">
                  </div>
                  <div class="right_action">
                      <div class="right_action_title">
                          {{$store.state.siteWebConfig.title}}
                      </div>
                      <el-form :model="dataForm" :rules="dataRule" size="small" ref="dataForm"
                          @keyup.enter.native="dataFormSubmitHandle()">
                          <el-form-item prop="username" style="margin: 30px 0 40px;">
                              <div class="right_action_items">
                                  <img  src="@/assets/img/default/ren.png" :alt="$t('clientPortalLogin.mspbots')" class="right_action_icon">
                                  <input type="text" v-model="dataForm.username" :placeholder="$t('login.username')">
                              </div>
                          </el-form-item>
                          <el-form-item prop="password">
                              <div class="right_action_items">
                                  <img  src="@/assets/img/default/suo.png" :alt="$t('clientPortalLogin.mspbots')" class="right_action_icon"
                                      style="top: 11px;height: 18px;width: 14px;">
                                  <input v-model="dataForm.password" type="password" :placeholder="$t('login.password')">
                              </div>
                          </el-form-item>
                          <!-- <el-form-item style="text-align: left">
                              <el-checkbox v-model="isRememberAccount">{{
                                  $t('clientPortalLogin.rememberAccount')
                              }}</el-checkbox>
                          </el-form-item> -->
                          <el-form-item>                            
                              <div class="right_action_items loginBtn" style="margin-top: 41px;" >
                                  <el-button @click="dataFormSubmitHandle()" type="primary"
                                  :style="{ backgroundColor: $store.state.siteWebConfig.loginButtonColor ,borderColor:$store.state.siteWebConfig.loginButtonColor}"  style="width: 19vw;height: 40px; border-radius: 20px;overflow: hidden;font-size: 15px;">{{ $t('login.title') }}</el-button>
                              </div>
                          </el-form-item>
                      </el-form>
                  </div>
              </div>
          </div>
      </div>
      <div class="jjxbox_btm">
        {{$store.state.siteWebConfig.footer_1}}  {{$store.state.siteWebConfig.footer_2}}
      </div>
  </div>
</template>

<script>
import Cookies from 'js-cookie'
import debounce from 'lodash/debounce'
import { getUUID } from '@/utils'
import { getDictInfoCommon } from '@/utils/common-request'
import { setToken } from '@/components/storybook/utilties/auth'

export default {
  data () {
    return {
      dataForm: {
        username: '',
        password: '',
        uuid: ''
      },
      loading: false,
      isRememberAccount: false,
      beforeLoginPage: null,
      beforeLoginParams: null
    }
  },
  computed: {
    dataRule () {
      return {
        username: [
          {
            required: true,
            message: this.$t('validate.required'),
            trigger: 'blur',
            pattern: '[^ \x22]+'
          },
          {
            required: true,
            message: this.$t('validate.required'),
            trigger: 'blur'
          }
        ],
        password: [
          {
            required: true,
            message: this.$t('validate.required'),
            trigger: 'blur'
          }
        ]
      }
    },
    img0 () {
      return this.$ossLink + '/app/gif/login_image.gif'
    }
  },
  created () {
    Promise.all([this.getloginInfo()]).then(() => {
      this.getCaptcha()
      this.accountFill()
      if (
        this.$store.state.app.isNavToLogin &&
        this.$store.state.app.beforeLoginPage &&
        this.$store.state.app.beforeLoginPage !== '/'
      ) {
        this.beforeLoginPage = this.$store.state.app.beforeLoginPage
        this.beforeLoginParams = this.$store.state.app.beforeLoginParams
      }
    })
  },
  methods: {
    getloginInfo () {
      this.loading = true
      this.$interface.other.getLoginConfigInfo({}).then(({data:res}) => {
        let tempHost = window.location.hostname
        if(tempHost && tempHost !== 'localhost' && res.data.length > 0) {         
          this.$store.state.siteWebConfig = res.data.filter(e=>e.origin === tempHost)[0]
        }
      }).finally(() => {
        this.loading = false
      })
    },
    getCaptcha () {
      this.dataForm.uuid = getUUID()
    },
    dataFormSubmitHandle: debounce(
      function () {
        this.$refs['dataForm'].validate(valid => {
          if (!valid) {
            return
          }
          this.dataForm.username = this.dataForm.username.trim()
          this.loading = true
          this.rememberAccount()
          this.$interface.login
            .webLoginApi(this.dataForm)
            .then(({ data: res }) => {
              if (res.code !== 0) {
                this.loading = false
                this.getCaptcha()
                this.clearnLocal()
                return this.$message.error(res.msg)
              }
              this.handleSignInWithButtonSuccess(res.data)

              this.loginSuccess(res.data)
              getDictInfoCommon()
            })
            .catch(error => {
              console.log(error, 'error')
              this.clearnLocal()
              this.loading = false
            })
        })
      },
      1000,
      { leading: true, trailing: false }
    ),
    async handleSignInWithButtonSuccess (data) {
      this.setCookies(data)
      this.setTabs()

      this.$store
        .dispatch('generateUser')
        .catch(error => console.error(error, 'get user info error'))

      this.authRoutingJump()
    },
    setCookies (data) {
      const { token, tenantCode, tenantName } = data || {}
      setToken(token, { sameSite: 'None', secure: true })
      window.location.protocol === 'https:'? Cookies.set('token', data.token, { sameSite: 'None', secure: true }): Cookies.set('token', data.token)
      window.location.protocol === 'https:'? Cookies.set('tenant_code', data.tenantCode, { sameSite: 'None',secure: true}): Cookies.set('tenant_code', data.tenantCode)
      window.location.protocol === 'https:'? Cookies.set('loginSource', 'login', { sameSite: 'None', secure: true }) : Cookies.set('loginSource', 'login') 
      window.sessionStorage.setItem('isMySelfCode', tenantCode)
      window.sessionStorage.setItem('isMySelfName', tenantName)   
    },
    async setTabs () {
      this.$store.state.contentTabs = window.SITE_CONFIG[
        'routerWithForgetToken'
      ] || [
          {
            ...window.SITE_CONFIG['contentTabDefault'],
            name: 'home',
            title: 'home'
          }
        ]
    },
    async authRoutingJump () {
      let query = window.userFormQuery
      if (query && has(query, 'formCode')) {
        return this.$router.push(
          {
            path: '/userForm',
            query: query
          },
          this.completeRoutingJump
        )
      }

      if (this.redirect) {
        return this.$router.push(this.redirect, this.completeRoutingJump)
      }

      if (
        window.sessionStorage.getItem('isLoginRouter') &&
        window.sessionStorage.getItem('isLoginRouterPath')
      ) {
        return this.$router.push(
          { path: window.sessionStorage.getItem('isLoginRouterPath') },
          this.completeRoutingJump
        )
      }

      if (
        this.$store.state.app.beforeLoginPage &&
        this.$store.state.app.isNavToLogin
      ) {
        return this.$router.push(
          {
            path:
              this.$store.state.app.beforeLoginPage +
              this.$store.state.app.beforeLoginParams
          },
          this.completeRoutingJump
        )
      }

      return this.$router.push(
        {
          path: '/'
        },
        this.completeRoutingJump
      )
    },

    completeRoutingJump () {
      this.$store.state.app.isNavToLogin = false
      this.$store.state.app.beforeLoginPage = null
      this.$store.state.app.beforeLoginParams = null
      sessionStorage.removeItem('isLoginRouterPath')
      sessionStorage.removeItem('isLoginRouter')
    },
    loginSuccess (data) {
      this.$interface.login
        .loginUserInfoApi()
        .then(res => {
          this.loading = false
          if (res.data.code !== 0) {
            this.$store.commit('SET_API_LOAD_STATUS', false)
            return this.$message.error(res.data.msg)
          }
        })
        .catch(() => {
          this.loading = false
          this.$store.commit('SET_API_LOAD_STATUS', false)
        })
    },
    goRegist () {
      this.$router.replace({ path: '/registAsAccount' })
    },
    toOtherPage (e) {
      const support = 'https://wiki.mspbots.ai/x/JogF'
      const contacts = 'https://mspbots.ai'
      const termsOfUse = 'https://mspbots.ai/termsofuse/'
      const compliance = 'https://mspbots.ai/privacy/'
      switch (e) {
        case 'termsOfUse':
          window.open(termsOfUse, '_blank')
          break
        case 'compliance':
          window.open(compliance, '_blank')
          break
        case 'support':
          window.open(support, '_blank')
          break
        case 'contacts':
          window.open(contacts, '_blank')
          break
        default:
          break
      }
    },
    rememberAccount () {
      if (this.isRememberAccount) {
        localStorage.setItem('portalaccounta', this.dataForm.username)
        localStorage.setItem('portalaccountb', this.dataForm.password)
        localStorage.setItem('portalaccountc', this.isRememberAccount)
      } else {
        localStorage.removeItem('portalaccounta')
        localStorage.removeItem('portalaccountb')
        localStorage.removeItem('portalaccountc')
      }
    },
    accountFill () {
      if (
        localStorage.getItem('portalaccountc') &&
        localStorage.getItem('portalaccounta') &&
        localStorage.getItem('portalaccountb')
      ) {
        this.$set(
          this.dataForm,
          'username',
          localStorage.getItem('portalaccounta')
        )
        this.$set(
          this.dataForm,
          'password',
          localStorage.getItem('portalaccountb')
        )
        this.$nextTick(() => {
          this.dataFormSubmitHandle()
        })
      }
    },
    clearnLocal () {
      if (localStorage.getItem('portalaccounta'))
        localStorage.removeItem('portalaccounta')
      if (localStorage.getItem('portalaccountb'))
        localStorage.removeItem('portalaccountb')
      if (localStorage.getItem('portalaccountc'))
        localStorage.removeItem('portalaccountc')
    }
  }
}
</script>
<style scoped>
.jjxbox {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: column;
    width: 100%;
    height: 100vh;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.jjxbox_top {
    display: flex;
    align-items: center;
    margin-top: 80px;
}

@font-face {
    font-family: electronicFont;
    src: url('@/assets/img/default/guangbiao.ttf')
}

.jjxbox_top_title {
    font-size: 48px;
    font-family: electronicFont;
    font-weight: 400;
    color: #D82727;
    line-height: 46px;
}

.jjxbox_btm {
    font-size: 18px;
    font-family: SimSun;
    font-weight: 400;
    color: #FFFFFF;
    margin-bottom: 45px;
}

.jjxbox_center {
    display: flex;
    justify-content: center;
    width: 100%;
    height: 644px;
    height: 60vh;
}

.jjxbox_center_left {
    width: 48%;
    height: 100%;
    margin-right: 50px;
}

.jjxbox_center_right {
    width: 55%;
    margin-top: 12px;
}

.login_box {
    position: relative;
    display: flex;
    align-items: center;
    width: 45vw;
    height: 52vh;
    border: 1px solid #FFFFFF;
    box-shadow: 0px 5px 49px 0px rgba(74, 113, 240, 0.23);
    border-radius: 14px;
    /* background-image: url('@/assets/img/default/mengceng.png');  */
    background-position: -19px -5px;
    background-repeat: no-repeat;
    background-size: 110% 107%;
}

.denglututips {
    position: absolute;
    left: 121px;
    top: 53px;
    font-size: 1.15vw;
    font-family: electronicFont;
    font-weight: 700;
    color: #3B63D9;
    line-height: 32px;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0);
}

.right_icon {
    width: 18vw;
    height: 16vw;
    margin-left: 34px;
    position: relative;
}

.right_action {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-left: 37px;
}

.right_action_title {
    /* font-size: 30px; */
    font-size: 1.57vw;
    font-family: electronicFont;
    font-weight: 400;
    color: #242424;
    line-height: 69px
}

.right_action_items {
    position: relative;
    display: flex;
    align-items: center;
    /* width: 360px; */
    width: 19vw;
    height: 40px;
    background: #FFFFFF;
    /* border: 1px solid #81A4FF; */
    border-radius: 4px;
    overflow: hidden;
}

.right_action_items input {
    width: 100%;
    height: 100%;
    padding-left: 35px;
    box-sizing: border-box;
    border: none;
    border-radius: 4px;
    /* outline: #326cff; */
}

.right_action_icon {
    position: absolute;
    left: 11px;
    top: 13px;
    width: 15px;
    height: 22px;
}

.loginBtn {
    border: none;
    background-color: rgba(0, 0, 0, 0);
    /* box-shadow: 0px 9px 25px 0px rgba(55, 100, 221, 0.63); */
    border-radius: 20px;

}

</style>
  